<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>涂鸦</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wrap {
				width: 500px;
				height: 700px;
				/*margin: 0 auto;*/
				border: 2px solid grey;
				text-align: center;
			}
			
			canvas{
				/*margin: auto;*/
				border-bottom: hotpink 5px solid;
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<!--<div class="content">-->
				<canvas id="canvas" width="500" height="600"></canvas>
			<!--</div>-->
			<button>清空画板</button> 线条宽度
			<input type="number" name="" id="" value="1" min="1" /> 颜色
			<input type="color" />
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var w = document.querySelector('input');
		var c = document.querySelectorAll('input')[1];
		var ctx = canvas.getContext('2d');
		ctx.save();
		//给点击按钮绑定清除画板事件
		$('button').click(function() {
			ctx.restore();
			ctx.clearRect(0,0,500,600);
			canvas.onmousemove = null;
		})
		//获取输入框的值给线条的宽
		console.log(w)
		$(w).blur(function(){
			ctx.lineWidth = $(w).val();
		})
		//给画板设置颜色
		$(c).change(function(){
				ctx.strokeStyle = $(this).val();
				console.log(ctx.strokeStyle);
		})
	
		//给 画板绑定鼠标按下事件
		$(canvas).mousedown(function(e) {
			flag = 0;
			ctx.restore();
			var even = e || event;
			var x = even.clientX;
			var y = even.clientY;
			ctx.beginPath();
			ctx.moveTo(x,y);
			//给画板绑定属性移动事件
			$(canvas).mousemove(function(e) {		
					ctx.clearRect(0,0,500,600);
					var even = e || event;
					ctx.lineTo(even.clientX, even.clientY);
					ctx.stroke();		
			});	
		});
		
		//鼠标弹起事件
			$(canvas).mouseup(function() {
				ctx.closePath();
				//解除绑定 unbind
				$(canvas).unbind("mousemove");	
			});
	</script>

</html>